{% extends "osr-style/pages/based/based.html" %}
{% block title %}{{_("关注")}}-{% endblock %}
{% block content %}
<div id="app" class="row osr-page">
    <section class="osr-panel">
        <div class="col-sm-9">
            {% include 'osr-style/pages/user/_user_info.html' %}
            <header class="panel-heading tab-bg-dark-navy-blue osr-panel-heading">
                <ul class="nav nav-tabs">
                    <li id="head_li_followed_user">
                        <a data-toggle="tab" class="osr-pointer" v-on:click="get_related_users('followed_user',1,'')">
                            <span v-if="!is_myself">{{_("Ta的关注")}}</span>
                            <span v-else>{{_("关注")}}</span>
                        </a>
                    </li>
                    <li id="head_li_fans">
                        <a data-toggle="tab" class="osr-pointer" v-on:click="get_related_users('fans',1,'')">
                            <span v-if="!is_myself">{{_("Ta的粉丝")}}</span>
                            <span v-else>{{_("粉丝")}}</span>
                        </a>
                    </li>
                </ul>
            </header>

            <!--用户列表-->
            <ul class="osr-users-list">
                <li class="osr-users-list-item" v-for="follow_user in user_related_users.datas">
                    <div class="author">
                        <a class="avatar" :href="'/user?id='+follow_user._id">
                            <img width="48px" height="48px" class="osr-img-circle-b" v-bind:src="follow_user.avatar_url.url" alt="{{_('头像')}}">
                        </a>
                        <div class="info">
                            <a class="name" :href="'/user?id='+follow_user._id">
                                {[follow_user.username]}
                            </a>
                            <span v-if="follow_user.gender=='m'" class="fa fa-mars osr-fa-gender-m" ></span>
                            <span v-if="follow_user.gender=='f'" class="fa fa-venus osr-fa-gender-f"></span>
                            <div class="meta">
                                <a :href="'/user/follow?t=followed_user&id='+follow_user._id">
                                    {[follow_user.follow.follow_user_num]}{{_("关注")}} >&nbsp;|&nbsp;
                                </a>
                                <a :href="'/user/follow?t=fans&id='+follow_user._id">
                                    {[follow_user.follow.fans_num]}{{_("粉丝")}} >
                                </a>
                            </div>
                        </div>
                        <button v-if="type!='fans' || follow_user.follow.current_following" v-on:click="unfollowed(follow_user._id)"
                                class="btn btn-info osr-pointer pull-right">
                            {{_("取消关注")}}
                        </button>
                        <button v-else class="btn btn-success osr-pointer pull-right" v-on:click="follow(follow_user._id)">
                            <i class="fa fa-plus "></i> {{_("关注")}}
                        </button>
                    </div>
                </li>
            </ul>
            <!--用户列表-->

             <!-- m页面导航-->
            <ul class="pager col-sm-12">
                <li v-if="pages.last < pages.current_page && pages.last>0" class="previous">
                    <a v-on:click="get_related_users(type, pages.last, keyword)" class="osr-pointer">
                        {{_("上一页")}}
                    </a>
                </li>
                 <span class="text-center osr-text">{{_('第{[user_related_users.current_page]}页/共{[user_related_users.page_total]}页')}}</span>
                <li v-if="pages.next > pages.current_page  && pages.next<=pages.page_total" class="next">
                    <a v-on:click="get_related_users(type, pages.next, keyword)" class="osr-pointer">
                        {{_("下一页")}}
                    </a>
                </li>
            </ul>
            <!-- //m页面导航-->

        </div>
        {% include 'osr-style/pages/user/_self_introduction.html' %}
    </section>

</div>
<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
            user_id:null,
            user:{profile:{}, avatar_url:{}, follow:{}},
            user_related_users:{},
            fans:{},
            keyword:"",
            pages:[],
            page:1,
            type:"followed_user",
            is_myself:0
      },
      filters: {
            formatDate: function (time) {
              return irrformatDate(time, "yyyy-MM-dd hh:mm");
            }
      }
    })

    // 加载完页面执行
    $(document).ready(function(){

        {% if current_user.is_authenticated %}
            var current_user_id = "{{current_user.id}}";
        {% else %}
            var current_user_id = null;
        {% endif %}

        var url_s = get_url_parameter()

        vue.type = get_obj_value(url_s, "t", vue.type)
        vue.user_id = get_obj_value(url_s, "id", current_user_id)
        vue.page = get_obj_value(url_s, "page", vue.page)
        vue.keyword = get_obj_value(url_s, "keyword", vue.keyword)

        if(vue.user_id == current_user_id){
            vue.is_myself = true;
        }
        if(vue.status == "is_issued"){
            nav_active("head_li_"+vue.type);
        }else{
            nav_active("head_li_"+vue.type);
        }

        get_user();
        get_related_users(vue.type, vue.page, vue.keyword);

    });

    //获取当前页面用户的基础资料
    function get_user(){
        d = {
            user_id:vue.user_id,
            is_basic:0
        }
        var result = osrHttp("GET","/api/account/profile/public", d, args={not_prompt:true});
        result.then(function (r) {
            vue.user = r.data.user;
            document.title = vue.user.username + "-" + "{{g.site_global.site_config.TITLE_SUFFIX}}";
        });
    }
    //获取已关注的
    function get_related_users(type, page, keyword){
        vue.type = type?type:vue.type;
        vue.page = page?page:vue.page;
        vue.keyword = keyword?keyword:vue.keyword;
        d = {
            user_id:vue.user_id,
            action:type,
            pre:20,
            page:page
        }

        var result = osrHttp("GET","/api/user/follow", d, args={not_prompt:true});
        result.then(function (r) {
            vue.user_related_users = r.data.users;
            vue.pages = paging(page_total=vue.user_related_users.page_total,
                        current_page=vue.user_related_users.current_page);
        });

        var url = window.location.pathname
                    +"?t="+vue.type
                    +"&id="+vue.user_id
                    +"&page="+vue.page;
        if(vue.keyword){
            url = url+'&keyword='+vue.keyword;
        }
        history_state(null, url);
    }


    //添加关注
    function follow(id){

        d = {
            ids:JSON.stringify([id])
        }

        var result = osrHttp("POST","/api/user/follow",d);
        result.then(function (r) {
            if(r.data.msg_type=='s'){
                get_user();
                get_related_users(vue.type, vue.page, vue.keyword);
            }
        });
    }

    function unfollowed(id){

        d = {
            ids:JSON.stringify([id])
        }

        var result = osrHttp("DELETE","/api/user/follow",d);
        result.then(function (r) {
            if(r.data.msg_type=='s'){
                get_user();
                get_related_users(vue.type, vue.page, vue.keyword);
            }
        });
    }

</script>
{% endblock %}